@import 'nib'

/* F O N T S * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

@font-face {
	font-family "Entypo"
	src url("/fonts/entypo.eot")
	src url("/fonts/entypo.eot?#iefix") format("embedded-opentype"),
		url("/fonts/entypo.woff") format("woff"),
		url("/fonts/entypo.ttf") format("truetype"),
		url("/fonts/entypo.svg#entypo") format("svg")
	font-weight normal
	font-style normal
}

@font-face {
	font-family "Entypo Social"
	src url("/fonts/entypo-social.eot")
	src url("/fonts/entypo-social.eot?#iefix") format("embedded-opentype"),
		url("/fonts/entypo-social.woff") format("woff"),
		url("/fonts/entypo-social.ttf") format("truetype"),
		url("/fonts/entypo-social.svg#entypo-social") format("svg")
	font-weight normal
	font-style normal
}

/* G L O B A L * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* Body & Wrapper */

body
	background #ffffff
	font-size 1em

/* Clearfix */

.clearfix
	clearfix()

/* Hidden */

.hidden
	display none !important
	visibility hidden

.visually-hidden
	border 0
	clip rect(0 0 0 0)
	height 1px
	margin -1px
	overflow hidden
	padding 0
	position absolute
	width 1px

/* Text Selection */

::-moz-selection
	background #777571
	color #ffffff
	text-shadow none

::selection
	background #777571
	color #ffffff
	text-shadow none

/* Links Style & Focus */

a,
.grey-link.grey-link-override a
	color #777571
	display inline-block
	text-decoration none

	&:hover
		color #777571

	&:active,
	&:focus
		background rgba(119,117,113,0.5)
		border-radius 3px
		color #ffffff !important
		outline none

/* Fonts */

body, button, html, input, select, textarea
	color #575551
	font-family "Roboto", "Helvetica", "Arial", sans-serif
	font-weight 300

h1, h2, h3, h4, h5, h6
	font-weight 200

b,
strong
	font-weight 400

pre
	background #f1f1f1
	border-radius 5px
	display block
	font-family "Source Code Pro", "Lucida Console", "Monaco", "Courier New", monospace
	font-size 0.85em
	font-weight 400
	padding 1em

code
	background #dedfdf
	border-radius 3px
	display inline
	font-family "Source Code Pro", "Lucida Console", "Monaco", "Courier New", monospace
	font-size 0.75em
	font-weight 600
	padding 0.25em 0.5em
	vertical-align baseline

pre code
	background transparent
	border-radius 0px
	font-size 1em
	font-weight 400
	padding 0

p
code
pre
	color #373531


/* Forms */
input,
textarea,
select
	appearance none
	border solid #e5e3df 1px
	border-radius 3px
	color #777571
	cursor pointer
	font-weight 400
	padding 0.3em 0.5em

	&:focus
		outline none
		border solid #e5e3df 1px

label
	cursor pointer

select:after
	content "stocazzo"

input[type="checkbox"]
	height 1em
	position relative
	width 1em
#builderOptions table input[type="checkbox"]
	&:checked,
	&.dependency
		background #f4f1ed
	&.activeChoice:checked
		background #7d8aa5

input[type="submit"]
	background #f4f1ed
	border-radius 5px
	color #777571 !important
	display block
	font-size 1.1em
	font-weight 300

input[type="submit"]:hover
	color #ffffff !important

/* Classes */

.button
	background #e5e8ed
	border-radius 5px
	color #7d8aa5
	display block
	font-size 1.1em
	position relative

	span
		display block
		padding 0.5em 0.6em
		line-height 1

		span
			padding 0

			&.icon
				font-size 200%
				position absolute
				top 0.8em
				right 0.2em
				line-height 0
				color #7d8aa5

		&.version
			display block
			font-size 0.8em
			margin-top 0.2em

	&.highlighted
		background #7d8aa5
		color #ffffff
		.icon
		pre
			color #ffffff

.lighter
	color #acaaa7

a:active .lighter,
a:focus .lighter
	color #ffffff


.darker
	color #777571

a:active .darker,
a:focus .darker
	color #ffffff

.summary
	font-size 1.3em
	width 70%

.description
	font-size 1.2em

.npm
	background #777571
	color #ffffff
	margin 1em 0

.command
	border none
	background #b1b9c9
	color #ffffff
	border-radius 5px
	display block
	font-weight 400
	margin 0.5em 0
	padding 0.15em 0.5em 0.25em

.wrapper
	margin 0 auto
	max-width 64em
	padding 0 4%

/* Icons */

.arrow:after
	icon-right-circled()
	font-family "Entypo"

.icon
	color #9c9ea0
	font-size 220%
	line-height 0
	position relative
	vertical-align baseline

a:active .icon,
a:focus .icon
	color #ffffff

.previous:after
	icon-left-circled()
	font-family "Entypo"

.next:after
	icon-right-circled()
	font-family "Entypo"

.download:after
	icon-down-circled()
	font-family "Entypo"

.github:after
	icon-github()
	font-family "Entypo Social"

.twitter:after
	icon-twitter()
	font-family "Entypo Social"

.facebook:after
	icon-facebook-squared()
	font-family "Entypo Social"

.googleplus:after
	icon-gplus()
	font-family "Entypo Social"


/* M A I N * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.about
	background #e5e8ed
	padding-top 0em
	padding-bottom 1em

	.introduction p
		font-size 1.3em
		margin 1em 0

	.license
		background #ffffff
		border solid #e5e3df 1px
		border-radius 5px
		color #b1b9c9
		margin 1.5em 0 0
		padding 1em
		h2
			margin-bottom 0.5em
		a
			color #6d798f
			text-decoration none

.updates
	padding-top 1em
	padding-bottom 1em

	div.box
		background #e5e8ed
		border-radius 5px
		padding 1em

	h3
		font-weight 400
		margin-bottom 1em
		span
			margin-right 0.5em
	p
		padding-bottom 0.5em

	a
		font-weight 400
		color #7d8aa5
	a:hover
		text-decoration underline

.main
	.color
		color #7d8aa5
	h2
		color #7d8aa5
	a
		color #7d8aa5

	.selected
		background-color #7d8aa5
		border-color #7d8aa5

	.blog
		margin-bottom 2em

		a
			position relative
			padding 0 0.2em

		a:focus, a:active
			background-color #777571 !important
			
		hr
			margin-top 2em
			margin-bottom 2em

		h2
			font-size 2em
			padding-bottom 0.5em
		h3
			font-size 2em
			padding 0.5em 0.3em 0em 0.3em
			margin-left -0.2em
		h4
			font-weight 400
		
		ul
			padding-left 2em
			li
				list-style-type disc
				padding 0.1em 0em

		small
			border 1px solid #acaaa7
			border-radius 5px
			display block
			font-size 0.8em
			font-weight 400
			margin 0.5em 0 2em
			padding 0.5em 1em
			a
				background #f4f1ed
				color #777571
				border-radius 3px
				display inline
				padding 0 0.5em

			.comments
				float right

		.post p
			font-size 1.1em
			line-height 1.3em
			margin 1em 0

		.post p, ul
			a
				font-weight 400
				text-decoration none
				color #7d8aa5


		.pagination
			a
				background #f4f1ed
				border-radius 5px
				padding 1em
				width 46%
				color #7d8aa5
				font-weight 400

			a .icon
				font-size 200%
				top 0.3em
				color #7d8aa5

			.older
				float left
				text-align right

			.newer
				float right
				text-align left

			.icon.previous
				float left
				margin-right 0.5em

			.icon.next
				float right
				margin-left 0.5em

.overview
	.summary,
	.description
		margin-bottom 1.5em

	.license
		font-size 0.8em
		margin 1em 0 3em

	.use
		li
			float left
			a
				margin 0 0 0 0.35em

			&:first-child a
				margin 0 0.35em 0 0

		.button
			height 3em

.features a
	display block
	position relative

.books
	img
		width 10em

	.about
		background-color #ffffff
		padding-top 0em
		a	
			font-weight 400
	.cover
		float right
		width 25%
		a
			margin 0.3em 0em
			font-weight 600
			padding 0.3em
			color #7d8aa5
	h2
		font-size 2em

	.introduction p
		font-size 1.1em

.examples
	section

		h1
			color #7d8aa5
			font-size 2em
			font-weight 200
		h3
			color #575551
			
		p
			padding-top 0.5em

